<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.wraper{
				margin-top: 50px;
				height: 720px;
				border: 1px solid #ff0000 ;
				background: url(./RC.png) no-repeat center;
				margin: 0 auto;
				position: relative;
				
			}
			.w{
				position: absolute; 
				top: 313px;
				right: 555px;
				transform:translateX(50%);
			}
			span
			{
				/* border: 1px solid #ff0000 ; */
			}
		   h1,h3,h5
			{
				
				}
		</style>
	</head>
	<body>
		<div class="wraper">
			<div class="w">
				<h1>一等奖:<span id="one"></span></h1>
				<h3>二等奖：<span id="two"></span></h3>
				<h5>三等奖：<span id="three"></span></h5>
			</div>
		
		</div>
		<script>
			let persons=['周杰伦','张学友','向鹏程','胡汉三','王麻子'];
			// 抽随机数
			 let radom=Math.floor(Math.random()*persons.length);
			 // alert(persons[radom]);
			 //dom操作获取id为one的标签
			 const one=document.querySelector("#one");
			 // 将获取到随机数 插入到标签里
			 one.innerHTML= persons[radom];
			 // 抽取后删除已经抽的元素
			 persons.splice(radom,1);
			 console.log(persons);
			 // 二等奖得主
			 // let persons=['周杰伦','张学友','向鹏程','胡汉三','王麻子'];
			 // 抽随机数
			  let radom1=Math.floor(Math.random()*persons.length);
			  // alert(persons[radom]);
			  //dom操作获取id为one的标签
			  const two=document.querySelector("#two");
			  // 将获取到随机数 插入到标签里
			  two.innerHTML= persons[radom1];
			  // 抽取后删除已经抽的元素
			  persons.splice(radom1,1);
			  console.log(persons);
			 // 三等奖
			 let radom2=Math.floor(Math.random()*persons.length);
			 // alert(persons[radom]);
			 //dom操作获取id为one的标签
			 const three=document.querySelector("#three");
			 // 将获取到随机数 插入到标签里
			 three.innerHTML= persons[radom2];
			 // 抽取后删除已经抽的元素
			 persons.splice(radom2,1);
			 console.log(persons);
		</script>
	</body>
</html>